<template>
  <div class="payment">
    <!-- <div class="user-info">
      <div class="item"><label class="label">联系人</label><input placeholder="姓名" class="input" v-model="name" type="text"></div>
      <div class="item"><label>联系电话</label><input placeholder="你的手机号" v-model="phone" type="text"></div>
      <div class="item"><label>送餐地址</label><input placeholder="送餐地址" v-model="address" type="text"></div>
    </div> -->
    <div class="overview">
      <h1 class="title">{{selectedAddress.userName}} {{selectedAddress.tel}}</h1>
      <div class="desc border-bottom-1px">
        <span class="text">{{selectedAddress.streetName}}</span>
      </div>
      <div class="favorite" @click="showAddress">
        <span class="icon-keyboard_arrow_right"></span>
      </div>
    </div>
    <div class="food-info">
      <div v-for="item in this.selectedGoods" :key="item" class="food-item">
        <label>{{item.name}}</label>
        <div class="mount"><span class="number" v-if="item.count > 1">x{{item.count}}</span>¥{{item.count * item.price}}</div>
      </div>
    </div>
    <div class="footer">
      <div class="money">待支付¥{{this.allPay}}</div>
      <div class="btn-pay" @click="pay">支付</div>
    </div>
  </div>
</template>
<script>
 import axios from 'axios'
 import Qs from 'qs'
 import { getDefaultAddr, getCookie, isEmpty } from 'api'

  export default {
    data() {
      return {
        selectedGoods: [],
        seller: {},
        selectedAddress: {}
      }
    },
    computed: {
      allPay() {
        var arrSum = this.selectedGoods.reduce(function(prev, cur) {
          return prev + (cur.count * cur.price)
        }, 0)
        return arrSum
      }
    },
    created() {
      this.selectedGoods = JSON.parse(window.selectedGoods)
      this.seller = JSON.parse(window.sellerPay)

      console.log(isEmpty(window.selectedAddr))
      if (isEmpty(window.selectedAddr) === true) {
        // 发送请求获取默认地址
        getDefaultAddr({
          openid: getCookie('openid')
        }).then((defaultAddr) => {
          this.selectedAddress = Object.assign({}, this.selectedAddress, defaultAddr)
        })
      } else {
        console.log(this.selectedAddress)
        this.selectedAddress = JSON.parse(window.selectedAddr)
      }
    },
    methods: {
      pay() {
        const goods = this.selectedGoods.map(good => {
          return {productId: good.id, productQuantity: good.count}
        })
        const ERR_OK = 0

        var data = Qs.stringify({'openid': getCookie('openid'),
          'phone': this.selectedAddress.tel,
          'name': this.selectedAddress.userName,
          'address': this.selectedAddress.streetName,
          'items': JSON.stringify(goods)})
        axios.post('http://liujinliang.wang/sell/buyer/order/create', data, {
          'headers': {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}}
        ).then((respones) => {
          console.log(respones)
          respones = respones.data
          console.log(respones)
          if (respones.errno === ERR_OK) {
            location.href = 'http://liujinliang.wang/sell/pay/create' +
              '?openid=' + getCookie('openid') +
              '&orderId=' + respones.data.orderId +
              '&returnUrl=' + encodeURIComponent('http://liujinliang.wang' + '/#/order/' + respones.data.orderId)

            // 清空购物车
            window.selectedGoods = '[]'
          } else {
            alert(respones.msg)
          }
        })
      },
      showAddress() {
        this.$router.push({ path: `/address` })
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .payment
    position: fixed
    z-index: 100
    top: 0
    left: 0
    width: 100%
    height: 100%
    background-color: #f5f5f5
    .overview
      padding: 18px
      .title
        margin-bottom: 8px
        line-height: 14px
        font-size: $fontsize-medium
        color: $color-dark-grey
      .desc
        display: flex
        align-items: center
        padding-bottom: 18px
        .star
          margin-right: 8px
        .text
          margin-right: 12px
          line-height: 18px
          font-size: $fontsize-small-s
          color: $color-grey
      .favorite
        position: absolute
        width: 50px
        right: 11px
        top: 18px
        text-align: center
        .icon-favorite
          display: block
          margin-bottom: 4px
          line-height: 24px
          font-size: $fontsize-large-xxx
          color: $color-light-grey-s
          &.active
            color: $color-red
        .text
          line-height: 10px
          font-size: $fontsize-small-s
          color: $color-grey
    .user-info
      margin-top: 10px
      background-color: #fff
      margin-bottom: 20px
      .item
        padding: 0 14px
        display: flex
        border-bottom: 1px solid #eee
        label
          padding: 14px 0
          display:inline-block
          flex-basis: 93px
          color: #333
        input
          display: block
          flex: 1
          outline: 0
          color: #333
    .food-info
      background-color: #fff
      .avator
        width: 19px
        height: 19px
        margin-right: 10px
      .card-hd
        display: flex
        align-items: center
        padding: 14px
        border-bottom: 1px solid #eee
      .food-item
        padding: 0 14px
        display: flex;
        align-items: center
        border-bottom: 1px solid #eee
        label
          display: inline-block
          padding: 14px 0
          flex: 1
          color: #666
        .mount
          display: flex
          flex: 1
          justify-content: flex-end
          .number
            padding-right: 20px
    .footer
      position: absolute
      bottom: 0
      width: 100%
      height: 44px
      display: flex
      background-color: #3c3c3c
      color: #fff
      .money
        flex: 1
        padding-left: 20px
        line-height: 44px
      .btn-pay
        flex-basis: 110px
        line-height: 44px
        text-align: center
        background-color: #56d176
</style>
